import React, { useState, useEffect } from 'react'
import { Tabs } from 'react-vant';
import { useNavigate } from 'react-router-dom';
import { InfiniteScroll, Toast } from 'antd-mobile'
import { Cell, Image, Button, Popup, Empty, Badge} from 'react-vant'

import { io } from 'socket.io-client'
import axios from 'axios';
import Ping from './Ping';
import Hui from './Hui';
axios.defaults.baseURL = 'http://123.57.180.216:3000/'


export default function Message() {
  const navigate = useNavigate();

  const [list5, setList5] = useState([]);
  const [list4, setList4] = useState([
    { _id: '1231', name: 'qwe', time: '2022-12-12', sta: true },
    { _id: '1232', name: 'qe', time: '2022-12-12', sta: false },
    { _id: '1233', name: 'we', time: '2022-12-12', sta: true },
    { _id: '1234', name: 'qda', time: '2022-12-12', sta: true },
  ]);

  const [list3, setList3] = useState([
    { name: 'qwe', time: '2022-12-12', zp: 
      {title:"一场神级演唱会",ping:"唱的太好了！",price:"257.00", cont: "现场的氛围非常好，很嗨，四个舞台演出了不一样的乐队风格，最后朴树的表演真的太棒了" }
    },
    { name: 'qwe', time: '2022-12-12', zp: 
      {title:"一场神级演唱会",ping:"唱的太6了！",price:"288.00", cont: "现场的氛围非常好，很嗨，四个舞台演出了不一样的乐队风格，最后朴树的表演真的太棒了" }
    },
    { name: 'qwe', time: '2022-12-12', zp: 
      {title:"一场神级演唱会",ping:"唱的太好了！",price:"1034.00", cont: "现场的氛围非常好，很嗨，四个舞台演出了不一样的乐队风格，最后朴树的表演真的太棒了" }
    },
    { name: 'qwe', time: '2022-12-12', zp: 
      {title:"一场神级演唱会",ping:"唱的太好了！",price:"752.00", cont: "现场的氛围非常好，很嗨，四个舞台演出了不一样的乐队风格，最后朴树的表演真的太棒了" }
    },
  ]);
  


  const [friends, setFriend] = useState([])
  const user = JSON.parse(sessionStorage.getItem('user'))


  const getFriend = async () => {
    const { data: { code, friendList } } = await axios.post('/friends', { friendId: user.friendId })
    code === 200 ? setFriend(friendList) : Toast.fail('获取失败')
  }
  useEffect(() => {

    getFriend()
  }, [])

  //获取好友列表 
  // const getFriend = async () => {
  //   const { data: { code, friendList } } = await axios.post('/friends', { friendId: user.friendId })
  //   code === 200 ? setList(friendList) : Toast.fail('获取失败')
  // }
  // 获取聊天信息
  // let  getMessage = async () => {
  //   let  { data: { code,liaoList } } = await axios.post('/liao', { formId: user._id, uid: (user._id + friend._id), sid: (friend._id + user._id) })
  //   code === 200 ? setList1(liaoList) : Toast.fail('获取信息失败')
  //   console.log(list1);
  // }


  let huig = async (item, index) => {
    let obj = item
    obj.sta = !obj.sta
    if (obj.sta == true) {
      Toast.show({
        content: '取消成功',
      })
    } else {
      Toast.show({
        content: '关注成功',
      })
    }
    let { data } = await axios.post('gz1', obj)
    getlist4()
  }





  let getlist4 = async () => {
    let { data } = await axios.post('gz')
    setList4(data.list)
  }



  let getlist5 = async () => {
    let { data } = await axios.get('sys')
    setList5(data.list)
  }


  useEffect(() => {
    // getFriend()//获取好友列表
    // getMessage()//获取聊天信息
    getlist5()//获取系统消息
    getlist4()//获取关注消息
    // getlist3()
    // getlist2()
    // getlist1()
  }, [])
  return (
    <div>
      <div>
        <h2 style={{ fontSize: '25px', textAlign: 'center', marign: '0' }}>消息</h2>
        <div>
          <Tabs sticky swipeable color={'#FF4500'}>
            <Tabs.TabPane title={'聊天'}>
              {/* {list.map((item, index) => {
                return (
                  <Cell
                    onClick={() => { navigate(`/xx?id=${item._id}`) }}
                    center
                    key={index}
                    title={item.name}
                    label='Deserunt dolor ea eaque eos'
                    icon={<Image width={40} height={40} src='/1.png' round />}
                    isLink
                  />
                )
              })} */}


              {
                friends.length ? friends.filter(item => item._id !== user._id).map(item => (
                  <Cell
                    onClick={() => {
                      navigate('/xx')
                      sessionStorage.setItem('friend', JSON.stringify(item))
                    }}
                    center
                    key={item._id}
                    title={item.username}
                    icon={
                      <Image round width={50} height={50} src={item.picture} />
                    }
                  />
                )) : <Empty description="暂无聊天信息，快去聊天吧！" />
              }
              <InfiniteScroll hasMore={false} />
            </Tabs.TabPane>




            <Tabs.TabPane title={'收到的赞'}>
              {list3.map((item, index) => {
                return (
                  <Ping key={index} item={item} />
                )
              })}
              <InfiniteScroll hasMore={false} />
            </Tabs.TabPane>






            <Tabs.TabPane title={'回复我的'}>
              {list3.map((item, index) => {
                return (
                  <Hui key={index} item={item} />
                )
              })}

              <InfiniteScroll hasMore={false} />
            </Tabs.TabPane>






            <Tabs.TabPane title={'关注我的'}>
              {list4.map((item, index) => {
                return (
                  <Cell
                    center
                    key={item._id}
                    title={`${item.name}关注了你`}
                    label={item.time}
                    icon={<Image width={40} height={40} src={item.img} round />}
                    isLink={false}
                  >
                    {item.sta === true ? <Button type='danger' size='small' onClick={() => { huig(item, index) }}>+回关</Button>
                      : <Button type='default' size='small' onClick={() => { huig(item, index) }}>已关注</Button>}
                  </Cell>
                )
              })}
              <InfiniteScroll hasMore={false} />
            </Tabs.TabPane>






            <Tabs.TabPane title={'系统消息'}>
              {list5.map((item, index) => {
                return (
                  <div key={item._id} style={{ backgroundColor: "#eee", padding: '20px' }}
                  onClick={() => { navigate('/app/type') }}>
                    <div style={{ margin: "0 auto", textAlign: 'center', background: '#333', width: "18vw", borderRadius: '20px', color: '#fff', padding: "5px 0" }}>{item.time}</div>
                    <div style={{ backgroundColor: "#fff", padding: '20px', marginTop: '20px', fontSize: '18px' }}>
                      <p>您有一张优惠卷即将过期</p>
                      <div style={{ fontSize: '13px', color: '#666', backgroundColor: '#eee', padding: "10px" }}>
                        亲爱的用户，您有一张{item.jis}元新人优惠卷明天就要过期啦！为您精选了超多演出，快去看看吧！
                      </div>
                    </div>
                  </div>
                )
              })}
              <InfiniteScroll hasMore={false} />
            </Tabs.TabPane>
          </Tabs>
        </div>
      </div>
    </div>
  )
}
